<template>
  <div class="pay">
      <div class="container pt40">
        <div class="step sp3 clearfix">
          <p class="first over"><span></span><i>1</i><em>我的购物车</em></p>
          <p class="over"><i>2</i><em>确认订单信息</em></p>
          <p class="last over"><i>3</i><em>成功提交订单</em><span></span></p>
        </div>
      </div>
      <!-- 普通商品购买成功-->
      <div class="container pt40">
        <div class="bd1 cart_success">
          <div class="info">
            <svg-icon icon-class="success" class-name="success"></svg-icon>
            <p class="f24 c333">恭喜您，订单提交成功！</p>
            <div class="c999 line24 mt10 f14">
              <p>订单号：<span class="c333">{{order.no}}</span></p>
              <p>运费：<span class="price">¥0.00</span></p>
              <p>优惠：<span class="price">¥0.00</span></p>
              <p>应付总额：<span class="price">¥{{order.total_amount}}</span></p>
            </div>
            <div class="link f18">
              <router-link class="order-detail" :to="`/my/order-detail/${order.id}`">查看订单详情</router-link>
              <router-link style="color: #999999;" to="/">继续购物</router-link>
            </div>
          </div>
        </div>

        <div class="cart-top mt30">
          <div class="clearfix"><b class="f24 c333">{{paymentDict[order.payment_method]}}</b></div>
        </div>

        <div class="bd1" style="margin-top: 20px;margin-bottom: 100px;">
          <div class="bgf8f8f8 pl60"><p class="pt30 pb30">支付 <i class="price f24">{{order.total_amount}}</i> 元，即可完成下单。</p></div>
          <!-- 支付宝付款 -->

          <dl class="pay-box mt20 pl60">
            <dt style="font-size: 30px;">支付方式</dt>
            <dd class="pay-container">
              <div id="zf2" class="choose">
                <el-radio-group v-model="payType">
                  <el-radio label="wechat_pay" style="margin-top:40px">
                    <img  src="../../assets/img/zfxx_wx.png" class="zft" alt="" >
                  </el-radio>
                  <el-radio label="alipay"> <img src="../../assets/img/zfxx_zfb.png" alt="" class="zft"></el-radio>
                  <el-radio label="offline"><img src="../../assets/img/zfxx_xx.png" alt="" class="zft"></el-radio>
                </el-radio-group>
              </div>
              <div class="pay-content" style="margin-left: -110px;margin-top: 30px;">
                <div v-if="payType === 'wechat_pay'">
                  <img class="scan-code" :src="wechatImg" alt="">
                  <img src="../../assets/img/wxzdbj.png" alt="" style="width: 200px;">
                </div>
                <div v-else-if="payType === 'alipay'">
                  <img class="scan-code" :src="AlipayImg" alt="">
                  <img src="../../assets/img/zfbbj.png" alt="" style="width: 150px;">

                </div>
                <ul v-if="payType === 'offline'" style="margin-top: 40px;font-size: 20px;">
                  <li>公司名称：工流界供应链（武汉）有限公司</li>
                  <li><span>开</span><span style="margin-left: 10px">户</span><span style="margin-left: 10px">行</span>：中信银行武汉自贸区支行</li>
                  <li><span>账</span><span style="margin-left: 40px">号</span>：8111 5010 1190 0615 165</li>
                  <li><span>电</span><span style="margin-left: 40px">话</span>：4006180107</li>
                </ul>
              </div>
                <div v-if="payType==='offline'" class="upload-payimg" style="margin-top: 60px;">
                <img :src="base64img" v-if="base64img" alt style='width:100px;margin-bottom:10px;margin-right:10px;'/>
  　　　　　　　　<el-button class="fileParent" type="success" icon="el-icon-plus" style="background:#fff;color:#333; width:110px;height:110px;" @change="uploadImg(this)">
                 <input class="file" type="file" id="dialogLogoImgId" name="pic" @change="uploadImg(this)" multiple="multiple" />
                </el-button><br/><br/>
                <p style="padding-left: 13px;margin-bottom:10px">请提交转账截图</p>
                <span v-if="payType === 'offline'" class="line-pay" @click="line_pay(base64img)">提交审核</span>
              </div>
            </dd>
          </dl>
          <!-- <div class="bt1">
            <div class="pt30 pb30 line36 pl60 c333">
              <p class="clearfix"><span class="w180 fl">订单金额： <i class="price">¥{{order.total_amount}}</i></span></p>
              <p class="clearfix"><span class="w180 fl">配送方式：xxxx配送</span><span class="fl">服务提供商：xxxx有限公司</span></p>
            </div>
          </div> -->
        </div>
      </div>

  </div>
</template>
<script type="text/javascript" src="https://tajs.qq.com/stats?sId=66566068" charset="UTF-8"></script>
<script>
import { mapMutations } from 'vuex'
import { orderDetail, orderPayWechat, orderPayAlipay, uploadPayImg } from '@/api/order'
import { paymentDict } from '@/utils/dict'
export default {
  name: 'Pay',
  metaInfo: {
    title: '我的购物车',
    titleTemplate: '工流界MRO一站式采购商城'
  },
  data () {
    return {
      order: '',
      wechatImg: '',
      AlipayImg: '',
      paymentDict,
      payType: 'wechat_pay',
      payment: '',
      count: '',
      base64img: ''
    }
  },
  created () {
    this.fetchOrderDetail()
    this.fobidden_back()
  },
  mounted () {
    this.setHasNav(false)
  },
  methods: {
    ...mapMutations({
      setHasNav: 'app/SET_PAGE_HAS_NAV'
    }),
    async fetchOrderDetail () {
      try {
        this.order = await orderDetail(this.$route.params.id)
        this.fetchWechatPayImg(this.order.id)
        this.fetchAlipayPayImg(this.order.id)
      } catch (e) {
        console.log(e)
      }
      setInterval(() => {
        let ress =  orderDetail(this.$route.params.id)
        if (ress.status === 'paid') {
        // this.goGrdoupRecor(this.order.id);
        this.$router.push('/logistics/' + this.order.id)
      }
      }, 5000);
    },
    async fetchWechatPayImg (id) {
      const res = await orderPayWechat(id)
      this.wechatImg = res
    },
    async doUploadPayImg (data, id) {
      const res = await uploadPayImg(data, id)
      if (res.status === 'paying') {
        this.$message.warning('支付提交成功！请等待审核')
        this.$router.push('/logistics/' + id)
      }
    },
    line_pay (img) {
      const _this = this
      const parms = {
        image_base64: _this.base64img,
        order_id: this.order.id
      }
      if (parms.image_base64 === '') {
        this.$message.warning('请上传支付凭证图片哦')
      } else {
        this.doUploadPayImg(parms, this.order.id)
      }
    },
    uploadImg (event) {
      const _this = this
      const imgFiles = document.getElementById('dialogLogoImgId').files // 获取文件列表
      const reader = new FileReader()
      reader.readAsDataURL(imgFiles[0]) // 只有一张图片，如果多张图片需要进行遍历
      reader.onload = function (ev) {
        _this.base64img = this.result // this.result是文件的base64地址
      }
      this.$notify({
        duration: 3000,
        title: '成功',
        message: '上传成功！',
        type: 'success'
      })
    },
    async fetchAlipayPayImg (id) {
      const res = await orderPayAlipay(id)
      this.AlipayImg = res
    },
    fobidden_back () {
    // 防止页面后退
      console.log('lkkkkk')
      history.pushState(null, null, document.URL)
      window.addEventListener('popstate', function () {
        history.pushState(null, null, document.URL)
      })
    }
    // enable_back() {
    //     history.go(-1);
    //     window.removeEventListener('popstate',this.back_common())
    // },
    // back_common() {
    //     history.pushState(null, null, document.URL);
    // }
  }
}
</script>

<style lang="scss" scoped>
  .step {
    background: #ccc;
    height: 5px;
    margin: 16px 0 45px;
    display: block;
    font-size: 0
  }

  .step.adtime {
    margin-bottom: 72px
  }

  .step p {
    float: left;
    text-align: center;
    position: relative;
    height: 5px
  }

  .sp3 p {
    width: 33.333333%
  }

  .sp5 p {
    width: 50%
  }

  .step p.first span,.step p.last span {
    width: 3px;
    height: 5px;
    position: absolute;
    top: 0;
    display: block
  }

  .step p.first span {
    background-position: -7px -361px;
    left: 0
  }

  .step p.last span {
    background-position: -10px -361px;
    right: 0
  }

  .step p i {
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -19px 0 0 -18px;
    background-position: 0 -404px;
    font-size: 16px;
    color: #fff;
    background-color: #db0012;
    border-radius: 50%;
    font-weight: bold;
  }

  .step p i bdo {
    width: 20px;
    height: 14px;
    position: absolute;
    left: 50%;
    top: 50%;
    background-position: -37px -393px;
    margin: -7px 0 0 -10px
  }

  .step p em {
    width: 100%;
    display: block;
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    bottom: -32px;
    position: relative;
    color: #aaa
  }

  .step p label {
    color: #999;
    bottom: -50px;
    position: relative;
    width: 100%;
    font-size: 12px;
    line-height: 12px;
    height: 12px;
    display: block
  }

  .step p.over {
    background: #ff0000
  }

  .step p.first.over span {
    background-position: 0 -361px
  }

  .step p.over i {
    background-position: 0 -368px
  }

  .step p.over em {
    color: #ff0000
  }

  .step p.last.over span {
    background-position: -3px -361px
  }

.order-detail {
  margin-bottom: 20px;
  background-color: #4448f8;
  color: #ffffff;
}
  .cart_success {
    padding: 50px 70px
  }

  .cart_success p {
    line-height: 20px;
  }

  .cart_success .info {
    position: relative;
    padding-left: 170px
  }

  .cart_success .info .success {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -50px;
    fill: #4448f8;
  }

  .cart_success .info .link {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -60px
  }

  .cart_success .info .link a {
    width: 200px;
    height: 50px;
    line-height: 50px;
    display: block;
    text-align: center
  }
  .price {
    color: #ff0000;
  }

  .pay-box {
    margin-bottom: 30px;
  }
  .pay-box dt {
    font-size: 16px;
  }
  .pay-box label {
    line-height: 40px;
  }
  .pay-container {
    overflow: hidden;
  }
  .pay-container .choose{
    width: 500px;
  }
  .pay-container .choose label{
    display: flex;
    align-items: center;
  }
  .pay-container .choose label input{
    display: inline-block;
    padding-right: 10px;
  }
  .pay-container .choose,
  .pay-container .pay-content {
    float: left;
  }
  .pay-container .pay-content li {
    line-height: 40px;
  }

  .scan-code {
    width: 140px;
    height: 140px;
  }
    .line-pay{
    width:150px;
    height:40px;
    line-height:40px;
    background: #ff3333;
    color:#fff;
    font-size:18px;
    text-align:center;
    cursor: pointer;
    padding:10px 20px;
  }
  .upload-payimg{
    width:250px;
    height:200px;
    float:left;
    margin-left:10%;
    margin-top:0%;
  }
  .fileParent {
    position: relative;
    img {
      position: absolute;
      width: 60px;
      height: 39px;
      left: 0;
      top: 0;
    }
  }
  .file {
    position: absolute;
    left: 0;
    opacity: 0;
  }
  .zft{
    width: 148px;
    margin: 10px 0;

  }
</style>
